import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/core/model/category_model.dart';
import 'package:flutter_demo/core/model/meal_model.dart';
import 'package:flutter_demo/core/store/meal_view_model.dart';
import 'package:flutter_demo/ui/component/layout.dart';
import 'package:flutter_demo/ui/shared/size_fit.dart';
import 'package:provider/provider.dart';

class MealPage extends StatelessWidget {
  static final String name = '/meal';

  @override
  Widget build(BuildContext context) {
    final category = ModalRoute.of(context).settings.arguments as CategoryModel;
    return Layout(category.title, MealContent());
  }
}

class MealContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final category = ModalRoute.of(context).settings.arguments as CategoryModel;
    return Selector<MealViewModel, List<MealModel>>(
      selector: (ctx, mealVM) {
        print(mealVM.meals.where((meal) {
          return meal.categories.contains(category.id);
        }));
        return mealVM.meals.where((meal) {
          return meal.categories.contains(category.id);
        }).toList();
      },
      shouldRebuild: (prev, next) {
        if(prev.length != next.length) return true;
        
        for (var i = 0; i < prev.length - 1; i++) {
          if (next.indexOf(prev[i], 0) == -1) {
            return true;
          }
        }
        
        return false;
      },
      builder: (ctx, meals, child) {
        return ListView.builder(
          itemCount: meals.length,
          itemBuilder: (ctx, index) {
            return MealItem(meals[index]);
          },
        );
      },
    );
  }
}

class MealItem extends StatelessWidget {
  final MealModel meal;

  MealItem(this.meal);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(setPx(10)),
      elevation: 5,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(setPx(12))),
      child: Column(
        children: <Widget>[
          buildImage(context),
          buildOperationInfo(),
        ],
      ),
    );
  }

  Widget buildImage(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(setPx(12)),
            topRight: Radius.circular(setPx(12))
          ),
          child: Image.network(
            meal.imageUrl,
            width: double.infinity,
            height: setPx(250),
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 20,
          child: Container(
            constraints: BoxConstraints(
              minWidth: 0,
            ),
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            decoration: BoxDecoration(
              color: Colors.black54,
              borderRadius: BorderRadius.circular(setPx(6))
            ),
            child: Text(meal.title, style: Theme.of(context).textTheme.headline3.copyWith(color: Colors.white),),
          ),
        )
      ],
    );
  }

  Widget buildOperationInfo() {
    return Padding(
      padding: EdgeInsets.all(setPx(15)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          buildOperationItem(Icon(Icons.schedule), "${meal.duration}分钟"),
          buildOperationItem(Icon(Icons.restaurant), "${meal.complexity}"),
          buildOperationItem(Icon(Icons.favorite), "未收藏"),
        ],
      ),
    );
  }

  Widget buildOperationItem(Widget icon, String content) {
    return Row(
      children: <Widget>[
        icon,
        SizedBox(width: 4,),
        Text(content, style: TextStyle(fontSize: setPx(12)),)
      ],
    );
  }
}
